window.addEventListener("load", function () {
    // 后台数据
    let data = [
        { "times": 4000, "price": 1200, "unitPrice": "0.3000" },
        { "times": 8000, "price": 2000, "unitPrice": "0.2500" },
        { "times": 40000, "price": 8000, "unitPrice": "0.2000" }
    ]
    // 功能一：将后台数据渲染进页面
    // 遍历后台数据
    data.forEach(function (obj) {
        // 将数据放入指定节点之中
        $(".scan").innerHTML += `<li data-price=${obj.price}  data-unitprice=${obj.unitPrice}>${obj.times}次</li>`
    })
    // 默认激活的结点
    $(".scan li")[1].classList.add("active");
    // 带动页面下一行数据的改动
    $(".dataNum").children[0].textContent = "￥" + $(".scan li")[1].dataset.price;
    $(".dataNum").children[1].textContent = $(".scan li")[1].dataset.unitprice;


    // 获取节点
    // 功能二：绑定点击事件
    $(".scan li").forEach(function (v, i) {
        v.addEventListener("click", function () {
            if (!this.classList.contains("default")) {
                // 删除所有li上面的激活类
                $(".scan li").forEach(function (v) {
                    v.classList.remove("active");
                })
                // 添加激活类
                this.classList.add("active");
                // 页面下一行数据的改动
                $(".dataNum").children[0].textContent = "￥" + this.dataset.price;
                $(".dataNum").children[1].textContent = this.dataset.unitprice;
            }



        })
    });


    // 功能：选项卡
    $("#tabContent")[0].style.display = "block";
    $("#tabTite li").forEach(function (v, i) {
        // 为每个li添加点击事件
        v.addEventListener("click", function () {
            // 排他思想：清除所有的样式，并隐藏所有的内容
            $("#tabTite li").forEach(function (v, i) {
                v.classList.remove("active");
                $("#tabContent")[i].style.display = "none";
            })
            // 添加样式
            this.classList.add("active");
            // 对应内容区域显示
            $("#tabContent")[i].style.display = "block";
        })
    })

























    //配置
    const config = {
        selector: "#bannerBg",
        vx: 4, //点x轴速度,正为右，负为左
        vy: 4, //点y轴速度
        height: 2, //点高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 100, //点个数
        color: "#000", //点颜色
        stroke: "0,0,0", //线条颜色
        dist: 6000, //点吸附距离
        e_dist: 20000, //鼠标吸附加速距离
        max_conn: 10, //点到点最大连接数
    };
    //调用
    CanvasParticle(config);
});